@namespace xforms url(http://www.w3.org/2002/xforms);

div > * 
{
	display: inline;
}

input input[readonly]
{
	background-color:#FFFF99;
	font-weight:bold;
	color:#993300;
	border-right: 2px solid #000 ;
	
}

.vong1
{
	border-right:2px solid #000;
	background-color:#FFFF99;
	font-weight:bold;
	color:#993300;
	border-right: 2px solid #FF0 ;
}
xforms|input .xf-value, .input-value
{
	color:#330099;
	width: 40px;
	height: 40px; 
	background-color: white;
	text-align:center;
	font-size:15pt;
	border:2px solid #185DAB;
	border-right: 2px solid #FF0 ;
}
html {
	color:#000;
	background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}
table {
	border-spacing:0;
	border-collapse:collapse;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var, optgroup {
	font-style:inherit;
	font-weight:inherit;
}
del, ins {
	text-decoration:none;
}
li {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
	font-variant:normal;
}
sup {
	vertical-align:baseline;
}
sub {
	vertical-align:baseline;
}
legend {
	color:#000;
}
input, button, textarea, select, optgroup, option {
	font-family:inherit;
	font-size:inherit;
	font-style:inherit;
	font-weight:inherit;
}
input, button, textarea, select {
*font-size:100%;
}
/* size : 100
   dir  : ltr */

/*******************************************************************************
  blocks definition
*******************************************************************************/

/* sitepage ------------------------------------------------------------------*/
#sitepage {
	z-index:5;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:20px;
	border:0px solid blue;
	padding:0px;
	width:792px;
}

/* mainblock ------------------------------------------------------------------*/
#mainblock {
	z-index:10;
	float:left; 
	margin:0px;
	/* border:0px solid green; */
	padding:0px;
	width:551px;
}

/* switchlang -----------------------------------------------------------------*/
#switchlang {
	z-index:25;
	visibility:hidden;
	position:absolute;
	left:50%; 
	top:50%;
	margin-top:-115px; 
	margin-left:-288px;
	width:575px; 
	height:230px;
	border:10px solid #c08bdd;
	border:10px solid rgba(192, 139, 221, 0.5); /* rewrite style for others than IE */
	padding:0;
	-moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	text-align:left; /* on rétablit l'alignement normal du texte */
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color:white;
	-moz-box-shadow: 5px 5px 12px #555;
	-webkit-box-shadow: 5px 5px 12px #555;
	box-shadow: 5px 5px 12px #555;
	filter:progid:DXImageTransform.Microsoft.Shadow(color='#555', Direction=35, Strength=10); /* Shadow for IE8+ */
	zoom:1; /* Shadow for IE8+ */
}

/* bravo -----------------------------------------------------------------*/
#bravo {
	z-index:24;
	visibility:hidden;
	position:absolute;
	left:50%; 
	top:50%;
	margin-top:-85px; 
	margin-left:-288px;
	width:575px; 
	height:170px;
	border:10px solid #c08bdd;
	border:10px solid rgba(192, 139, 221, 0.5); /* rewrite style for others than IE */
	padding:0;
	-moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	text-align:left; /* on rétablit l'alignement normal du texte */
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color:white;
	-moz-box-shadow: 5px 5px 12px #555;
	-webkit-box-shadow: 5px 5px 12px #555;
	box-shadow: 5px 5px 12px #555;
	filter:progid:DXImageTransform.Microsoft.Shadow(color='#555', Direction=35, Strength=10); /* Shadow for IE8+ */
	zoom:1; /* Shadow for IE8+ */
}

/* sitename ------------------------------------------------------------------*/
#sitename {
	z-index:10;
	display:-moz-inline-stack; /* for Firefox v1 & v2 */
	display:inline-block; /* replace previous value set at -moz-inline-stack if the current browser recognizes inline-block */
	margin:2px;
	border:0px solid silver;
	padding:2px;
	width:780px;
}

/* topleftmsg ----------------------------------------------------------------*/
#topleftmsg {
	z-index:10;
	margin:2px;
	border:0px solid silver;
	padding:2px;
	width:231px;
	height:40px;
}

/* topmiddlemsg --------------------------------------------------------------*/
#topmiddlemsg {
	z-index:10;
	float:right; 
	display:-moz-inline-stack; /* for Firefox v1 & v2 */
	display:inline-block; /* replace previous value set at -moz-inline-stack if the current browser recognizes inline-block */
	margin:2px;
	border:0px solid silver;
	padding:2px;
	width:302px;
	height:40px;
}

/* fish logo -----------------------------------------------------------------*/
#fish {
	z-index:10;
	margin:2px;
	border:0px solid silver;
	padding:2px;
	width:231px;
	height:302px;
	background:url("/img/sudoku_fish_231x298.png") no-repeat;
}

/* gridspace -----------------------------------------------------------------*/
#gridspace {
	z-index:10; 
	float:right; 
	display:-moz-inline-stack; /* for Firefox v1 & v2 */
	display:inline-block; /* replace previous value set at -moz-inline-stack if the current browser recognizes inline-block */
	direction:ltr;
	unicode-bidi:bidi-override;
	margin:2px;
	border:0px solid silver;
	padding:2px;
	width:302px;
	height:302px;
}

/* bottomleftmsg -------------------------------------------------------------*/
#bottomleftmsg {
	z-index:10;
	margin:2px;
	border:0px solid silver;
	padding:2px;
	width:231px;
	height:50px;
}

/* bottommiddlemsg -----------------------------------------------------------*/
#bottommiddlemsg {
	z-index:10;
	float:right; 
	display:-moz-inline-stack; /* for Firefox v1 & v2 */
	display:inline-block; /* replace previous value set at -moz-inline-stack if the current browser recognizes inline-block */
	margin:2px;
	border:0px solid silver;
	padding:2px;
	width:302px;
	height:50px;
}

/* submsg --------------------------------------------------------------------*/
#submsg {
	text-align:justify;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	margin:2px;
	border:0px solid silver;
	padding:2px;
	width:541px;
}

/* rightcolumn --------------------------------------------------------------*/
#rightcolumn {
	z-index:10;
	display:-moz-inline-stack; /* for Firefox v1 & v2 */
	display:inline-block; /* replace previous value set at -moz-inline-stack if the current browser recognizes inline-block */
	float:right; 
	margin:2px;
	border:0px solid silver;
	padding:2px;
	width:231px;
	height:408px;
}

/* footer -------------------------------------------------------------------*/
#footer {
	z-index:10;
	display:inline-block;
	float:left;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666;
	margin:2px;
	border-top:1px dotted #666;
	/* border:0px solid silver; */
	padding:2px;
	width:780px;
}

/* underfooter --------------------------------------------------------------*/
#underfooter {
	z-index:10;
	display:inline-block;
	float:left;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666;
	margin:2px;
	border-top:1px dotted #666;
	/* border:0px solid silver; */
	padding:2px;
	width:780px;
}

/****************************************************************************
  common styles
****************************************************************************/
body {
	background: #FFFFFF;
	text-align: center; /* pour corriger le bug de centrage IE */
}
#sitename H1 {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	color:#F30;
	font-weight:bold;
}
#sitename H1 a {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	color:#F30;
	font-size:22px;
	font-weight:bold;
	text-decoration:none;
}
#topmiddlemsg H2 {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	color:#a67100;
	font-size:16px;
	font-weight:bold;
	text-shadow:0 0 4px white, 0 -5px 4px #fae329, 2px -10px 6px #f5d720;
}

.currentdir {
	direction:ltr;
	unicode-bidi:bidi-override;
}

.dirltr {
	direction:ltr;
	unicode-bidi:bidi-override;
}

.dirrtl {
	direction:rtl;
	unicode-bidi:bidi-override;
}

.windowtitle {
	padding:5px;
	background-color:#974dc1;
	color:white;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:15px;
	letter-spacing:-0.4px;
}

#switchlang table {
	margin:10px;
	border:0px solid black;
	width:95%;
}

#switchlang table td {
	padding:5px;
	border:0px solid black;
	width:33%;
	vertical-align:top;
	text-align:center;
}

#switchlang table td a {
	color:#974dc1;
	text-decoration:none;
}

#switchlang table td a:hover {
	text-decoration:underline;
}

.windowclose {
	padding:1px;
	border-top:1px solid #974dc1;
}

.buttonclose {
	display:inline-block;
	float:right; 
	margin:5px;
	border:1px outset gray;
	padding:5px;
	background-color:#974dc1;
	color:white;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:15px;
	letter-spacing:-0.3px;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	cursor:pointer;
}

.buttonclose a {
	color:white;
	text-decoration:none;
}

.noa {
	font-weight:bold;
	text-decoration:none;
	background-color:#fae329;
}

.noa:hover {
	font-weight:bold;
	text-decoration:none;
	background-color:#fae329;
}

#rules {
	margin-top:30px;
	padding:15px;
	text-align:justify;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#185DAB;
}

#congrats {
	padding:15px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:48px;
	color:#e6ad00;
	font-weight:bold;
	text-shadow:0 0 4px white, 0 -5px 4px #fae329, 2px -10px 6px #f5d720;
}

/****************************************************************************
  grid-legend 
****************************************************************************/
#gl {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	margin:10px;
	padding:0 0 0 0;
	background-color:#e4d2ee;
	border:2px solid #e4d2ee;
	-moz-border-radius:6px;
	-khtml-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}

/****************************************************************************
  level 
****************************************************************************/
#level {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:10px;
	padding:0 0 0 0;
	background-color:#e4d2ee;
	border:2px solid #e4d2ee;
	-moz-border-radius:6px;
	-khtml-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}

#level .levelrandom {
	background-color:white;
}
#level .level0 {
	background-color:#dcfbdb;
}
#level .level1 {
	background-color:#dcfbdb;
}
#level .level2 {
	background-color:#dcfbdb;
}
#level .level3 {
	background-color:#f9d499;
}
#level .level4 {
	background-color:#f9d499;
}
#level .level5 {
	background-color:#f9d499;
}
#level .level6 {
	background-color:#f59fcd;
}
#level .level7 {
	background-color:#f59fcd;
}
#level .level8 {
	background-color:#f59fcd;
}
#level .level9 {
	background-color:#f893a1;
}
#level .level10 {
	background-color:#f893a1;
}

/****************************************************************************
  grid-control
****************************************************************************/
#gc {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	margin:10px;
	padding:0 0 0 0;
}


/****************************************************************************
  footer sub-styles
****************************************************************************/
#footer img {
	vertical-align:middle;
}

#footer table {
	border:0;
	width:100%;
}

#footer table #col1 {
	text-align:left;	
	vertical-align:top;
	width:30%;
	direction:ltr;
	unicode-bidi:bidi-override;
}

#footer table #col2 {
	text-align:center;
	vertical-align:top;
	width:40%;
	direction:ltr;
	unicode-bidi:bidi-override;
}

#footer table #col2 a {
	color:#666;
	text-decoration:none;
}

#footer table #col2 a:hover {
	color:blue;
}

#footer table #col3 {
	text-align:right;	
	vertical-align:top;
	width:30%;
}

#footer table #col3 p {
	color:#974dc1;
	text-decoration:none;
	cursor:pointer;
}

#footer table #col3 p:hover {
	color:blue;
}

#chrono { 
	font-size:xx-small;
}

/****************************************************************************
  underfooter  sub-styles
****************************************************************************/
#underfooter table {
	border:0;
	width:100%;
}

#underfooter table #col1 {
	text-align:center;
	vertical-align:top;
	width:100%;
	direction:ltr;
	unicode-bidi:bidi-override;
}

/****************************************************************************
  facebook "I like" button
****************************************************************************/
#fb {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	margin:0;
	padding:0 0 0 0;
}


/****************************************************************************
  Donate button
****************************************************************************/
#donate {
	text-align:center;	
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	margin:20;
	padding:0 0 0 0;
	background-color:#e4d2ee;
	border:2px solid #e4d2ee;
	-moz-border-radius:6px;
	-khtml-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}


/****************************************************************************
  opacity
****************************************************************************/
.opacity {
	opacity:0.45; /* firefox, opera, safari, chrome */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=45)"; /* IE 8 */
	filter:alpha(opacity=45); /* IE 4, 5, 6 and 7 */
	zoom:1; /* so the element "hasLayout"
	/* or, to trigger "hasLayout" set a width or height */
}

.opacity:hover {
	opacity:1; /* firefox, opera, safari, chrome */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */
	filter:alpha(opacity=100); /* IE 4, 5, 6 and 7 */
	zoom:1; /* so the element "hasLayout"
	/* or, to trigger "hasLayout" set a width or height */
}


/*************************************************************************************
  sudoku grid
**************************************************************************************/

/* grid -----------------------------------------------------------------------------*/
#grid {
	z-index:10; 
	margin:0px;
	-moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:2px solid #185DAB;
	padding:0px;
	border-collapse:separate;
}

#grid td {
	text-align:center;
}


/* input-cell -----------------------------------------------------------------------*/
.ic {
	padding:0px;
	margin:0px;
	width:32px;
	height:32px;
	border:0;
	font-size:22px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background-color:white;
	color:#185DAB;
	cursor:text;
	-webkit-user-select: none; /* disable selection on user interface on iPad & iPhone */
}

/* .ic:hover {
	background-color:#eee; 
} */

/* input-cell-bad -------------------------------------------------------------------*/
.icb {
	padding:0px;
	margin:0px;
	width:32px;
	height:32px;
	border:0;
	font-size:22px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background-color:red;
	color:white;
	cursor:text;
	-webkit-user-select: none; /* disable selection on user interface on iPad & iPhone */
}

/* input-cell-lock ------------------------------------------------------------------*/
.icl {
	padding:0px;
	margin:0px;
	width:32px;
	height:32px;
	border:0;
	font-size:22px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	background-color:#ffffff;
	color:black;
	cursor:default;
}

/* single-border-left-right ---------------------------------------------------------*/
.sblr {
	border-left:1px solid #ddddee;
	border-right:1px solid #ddddee;
}

/* single-border-top-bottom ---------------------------------------------------------*/
.sbtb {
	border-top:1px solid #ddddee;
	border-bottom:1px solid #ddddee;
}

/* single-border-left ---------------------------------------------------------------*/
.sbl {
	border-left:1px solid #ddddee;
}

/* single-border-right --------------------------------------------------------------*/
.sbr {
	border-right:1px solid #ddddee;
}

/* single-border-top ----------------------------------------------------------------*/
.sbt {
	border-top:1px solid #ddddee;
}

/* single-border-bottom -------------------------------------------------------------*/
.sbb {
	border-bottom:1px solid #ddddee;
}

/* double-border-left ---------------------------------------------------------------*/
.dbl {
	border-left:2px solid #185DAB;
}

/* double-border-right --------------------------------------------------------------*/
.dbr {
	border-right:2px solid #185DAB;
}

/* double-border-top ----------------------------------------------------------------*/
.dbt {
	border-top:2px solid #185DAB;
}

/* double-border-bottom -------------------------------------------------------------*/
.dbb {
	border-bottom:2px solid #185DAB;
}

/* radius-top-left ------------------------------------------------------------------*/
.rtl {
	-moz-border-radius-topleft:10px;
	-webkit-border-radius-topleft:10px;
	-khtml-border-radius-topleft:10px;
	border-radius-topleft:10px;
}

/* radius-top-right -----------------------------------------------------------------*/
.rtr {
	-moz-border-radius-topright:10px;
	-webkit-border-radius-topright:10px;
	-khtml-border-radius-topright:10px;
	border-radius-topright:10px;
}

/* radius-bottom-left ---------------------------------------------------------------*/
.rbl {
	-moz-border-radius-bottomleft:10px;
	-webkit-border-radius-bottomleft:10px;
	-khtml-border-radius-bottomleft:10px;
	border-radius-bottomleft:10px;
}

/* radius-bottom-right --------------------------------------------------------------*/
.rbr {
	-moz-border-radius-bottomright:10px;
	-webkit-border-radius-bottomright:10px;
	-khtml-border-radius-bottomright:10px;
	border-radius-bottomright:10px;
}

/*************************************************************************************
  paddle
**************************************************************************************/
#paddle {
	position:absolute; 
	top:0px;
	left:0px;
	z-index:20; 
	visibility:hidden; 
	border:0;
}

#paddle table {
	margin:10px;
	border:0px solid black;
	width:90px;
}

.border1 {
	border:1px solid black;
}

.halfheight {
	height:15px;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	cursor:pointer;
	-moz-box-shadow: 2px 2px 5px #555;
	-webkit-box-shadow: 2px 2px 5px #555;
	box-shadow: 2px 2px 5px #555;
}

.normalheight {
	width:30px;
	height:30px;
	font-size:20px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	cursor:pointer;
	-moz-box-shadow: 2px 2px 5px #555;
	-webkit-box-shadow: 2px 2px 5px #555;
	box-shadow: 2px 2px 5px #555;
}

.colordigit {
	background-color:#efea9a;
}

.colordigit:hover {
	background-color:#fae329;
}

.colorclose {
	background-color:#b7b7b7;
}

.colorclose:hover {
	background-color:#979797;
}

.colorclear {
	background-color:#ed9aaa;
}

.colorclear:hover {
	background-color:#e55a54;
}

/*************************************************************************************
  locales
**************************************************************************************/
#locales {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666;
	margin-left:auto;
	margin-right:auto;
	padding:0;
}
#locales a {
	width:.1em;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#666;
	text-align:center;
	text-decoration:none;
}
#locales a:hover {
	color:blue;
}

#locales img {
	vertical-align:middle;
}

#locales ul {
	list-style:none;
}

#locales li {
	text-align:right;
	margin-right:3px;
	margin-bottom:3px;
	padding:3px;
}
